import { Component, Watch } from 'vue-property-decorator'
import Styles from './apply.less'
import SelectTree from '../../components/SelectTree'
import SelectTreeEmpty from '../../modules/selectTreeEmpty'
import Upload from '@/components/Upload'
import { State, Mutation } from 'vuex-class'
import { RootState } from '@/store'
import CreateUpdateMixin from './createUpdateMixin'

const formRule = {
  area: [
    {
      required: true,
      message: '机构所属区域不能为空',
      trigger: 'blur',
    },
  ],
  parentOrgCode: [
    {
      required: true,
      message: '请选择上级机构',
    },
  ],
  orgName: [
    {
      required: true,
      message: '机构单位名称不能为空',
      trigger: 'blur',
    },
  ],
  licenseNumber: [
    {
      required: true,
      message: '统一社会信用代码不能为空',
      trigger: 'blur',
    },
    {
      len: 18,
      message: '长度没有达到 18 位',
      trigger: 'blur',
    },
  ],
}

@Component({})
export default class OrganizationApply extends CreateUpdateMixin {
  @Mutation('home/setHomeTitle') private setHomeTitle!: (data: string) => {}
  private licenseNumber!: string
  @State((state: RootState) => state.home.title)
  private homeTitle?: string

  formData: any = {
    orgName: '',
    orgType: 1,
    licenseType: 1,
    licenseNumber: '',
    officer: '',
    mobile: '',
    applyType: 0, // 0-新增，1-更新
  }

  protected render() {
    return (
      <div class={Styles.organizationApplyView}>
        {!this.isDone && (
          <el-form
            size="mini"
            ref="form"
            {...{
              props: { model: this.formData, rules: formRule },
            }}
          >
            <h1>
              <i>*</i>用章机构基本信息
            </h1>
            <el-form-item label="证照类型" style="width: 250px;">
              统一社会信用代码
            </el-form-item>
            <el-form-item label="机构类型" style="width: 250px;">
              单位
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="licenseNumber">
              <el-input maxlength={18} v-model={this.formData.licenseNumber} />
            </el-form-item>
            <el-form-item
              label="待创建机构名称"
              prop="orgName"
              style="padding-bottom: 12px;"
            >
              <el-input v-model={this.formData.orgName} />
            </el-form-item>
            <div class="area-info">
              <el-form-item
                label="上级机构选择"
                prop="area"
                class="line-height22 label-padding-right30"
              >
                <el-tooltip class="item" effect="dark" placement="bottom-start">
                  <div slot="content">
                    您创建的组织机构于组织机构树中将添加于此机构或分类节点下
                  </div>
                  <i
                    class="el-icon-question f14 ml5"
                    style="position: absolute;top: 8px; left: -35px;"
                  />
                </el-tooltip>
                <el-cascader
                  ref="areaSelect"
                  v-model={this.formData.area}
                  options={this.areaData}
                  show-all-levels={false}
                  onChange={this.areaChange}
                  placeholder="请选择区域"
                  {...{
                    props: {
                      props: {
                        value: 'uuid',
                        label: 'fullName',
                        children: 'subList',
                      },
                    },
                  }}
                />
              </el-form-item>
              <el-form-item class="select-org" prop="parentOrgCode">
                <SelectTree
                  ref="selectTree"
                  class="query-select"
                  loading={this.loadTree}
                  parentId={this.formData.area.slice(-1)[0]}
                  value={this.formData.parentOrgName}
                  onInit={this.getAllTree}
                  defaultExpended={this.defaultExpended}
                  defaultProps={{ minSearchSize: 2 }}
                  onHandleNodeClick={this.selectOrg}
                  onError={this.selectTreeError}
                >
                  <template slot="empty">
                    <SelectTreeEmpty>
                      <p>
                        （1）请确认已输入机构名称是否正确无误，可模糊搜索；
                        <br />
                        （2）如确认名称无误但系统内缺失，请在本页面提交证明材料等待审核通过后，重新发起印章申请。
                      </p>
                    </SelectTreeEmpty>
                  </template>
                </SelectTree>
                {/* <el-tooltip class="item" effect="dark" content="请选择本机构的直接或间接归属机构" placement="bottom-start">
                <i class="el-icon-question"/>
              </el-tooltip> */}
              </el-form-item>
            </div>
            <el-form-item label="联系人">
              <el-input v-model={this.formData.officer} />
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model={this.formData.mobile} />
            </el-form-item>

            <h1 class="upload-header">
              <i>*</i>上传机构单位统一社会信用代码证
            </h1>
            <div class="upload-box">
              {!this.formData.licenseFileKey && (
                <Upload
                  style="margin-left: 120px;"
                  content="点击上传"
                  file={this.file}
                  action={this.uploadUrl}
                  success={this.uploadSuccess}
                  error={this.uploadError}
                  beforeUpload={this.beforeUpload}
                />
              )}

              {this.formData.licenseFileKey && (
                <div class="preview-img" style="margin-left: 120px;">
                  <div class="over-layer">
                    <i class="el-icon-search" />
                  </div>
                  <i class="el-icon-delete" onClick={this.deleteImageEvt} />
                  <el-image
                    style="width: 100%; height: 100%"
                    src={this.formData.licenseFileUrl}
                    preview-src-list={[this.formData.licenseFileUrl]}
                  />
                </div>
              )}
              <div class="help-info">
                上传须知:
                <br /> 1、图片按照A4纸大小扫描，像素300dpi <br />
                2、格式须为PNG/JPG/JPEG <br />
                3、为提高审核通过率请确保单位名称和统一社会信用代码清晰可见，且和申请表保持一致
              </div>
            </div>
            <el-form-item class="footer">
              <el-button onClick={() => this.$router.go(-1)}>关闭</el-button>
              <el-button type="primary" onClick={this.submitEvt}>
                提交
              </el-button>
            </el-form-item>
          </el-form>
        )}

        {this.isDone && (
          <div class="success-view">
            <i class="el-icon-circle-check" />
            <h1>提交成功！请耐心等待审核</h1>
            <p>{this.timer} 秒后返回组织机构更新申请</p>

            <el-button class="link-btn" onClick={() => this.gotoListPage(true)}>
              前往查看
            </el-button>
            <p>在组织机构更新中可以查看审核结果</p>
          </div>
        )}
      </div>
    )
  }

  @Watch('name')
  private licenseNumberChange(val: any) {
    this.formData.officer = val
  }
  @Watch('accountMobile')
  private accountMobileChange(val: any) {
    this.formData.mobile = val
  }

  mounted() {
    this.remoteAreaData()
    this.$el.scrollIntoView()
    // 追加当前联系人
    this.formData.officer = this.name
    this.formData.mobile = this.accountMobile
  }
}
